<template>
  <div class="editor-container">
    <a-layout>
      <a-layout-header class="header">
        <div class="page-title">
          <router-link to="/">
            <img alt="沛初" src="@/assets/logo-simple.png" class="logo-img" />
          </router-link>
          <!-- <inline-edit :value="page.title" @change="titleChange" /> -->
        </div>
      </a-layout-header>
    </a-layout>
    <a-layout>
      <a-layout-sider width="300" style="background: #fff">
        <div class="sidebar-container">
          组件列表
          <ComponentList
            :list="defaultTextTemplates"
            @on-item-click="addItem"
          />
        </div>
      </a-layout-sider>
      <a-layout style="padding: 0 24px 24px">
        <a-layout-content class="preview-container">
          <p>画布区域</p>
          <div class="preview-list" id="canvas-area">
            <edit-wrapper
              v-for="component in components"
              :key="component.id"
              :id="component.id"
              :active="component.id === currentElement?.id"
              @set-active="setActive"
            >
              <component :is="component.name" v-bind="component.props" />
            </edit-wrapper>
          </div>
        </a-layout-content>
      </a-layout>
      <a-layout-sider
        width="300"
        style="background: #fff"
        class="settings-panel"
      >
        组件属性
        <props-table
          v-if="currentElement?.props"
          :props="currentElement.props"
        ></props-table>
        <pre>
        {{ currentElement?.props }}
      </pre
        >
      </a-layout-sider>
    </a-layout>
  </div>
</template>
<script lang="ts" setup>
import { computed, defineComponent } from "vue";
import { useEditorStoreWithOut } from "@/store/modules/editor";
import { PText, EditWrapper, PropsTable } from "@/components";
import ComponentList from "@/components/ComponentList.vue";
import { defaultTextTemplates } from "@/data/defaultTemplates.ts";
import type { ComponentData } from "@/store/modules/editor";

defineOptions({
  name: "Editor",
  components: { PText, ComponentList, PropsTable },
});

const editorStore = useEditorStoreWithOut();

const currentElement = computed<ComponentData | undefined>(
  () => editorStore.getCurrentElement
);

const components = computed(() => editorStore.components);
const setActive = (id: string) => {
  console.log("setActive", id);
  editorStore.setActive(id);
};
const addItem = (item: any) => {
  console.log("addItem:", item);
  editorStore.addComponent(item);
};
</script>
<style lang="less" scoped>
.editor-container .preview-container {
  padding: 24px;
  margin: 0;
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.editor-container .preview-list {
  padding: 0;
  margin: 0;
  min-width: 375px;
  min-height: 200px;
  border: 1px solid #efefef;
  background: #fff;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  margin-top: 50px;
  max-height: 80vh;
}
.page-title {
  display: flex;
}
.page-title .inline-edit span {
  font-weight: 500;
  margin-left: 10px;
  font-size: 16px;
}
.preview-list.canvas-fix .edit-wrapper > * {
  box-shadow: none !important;
}
.preview-list.canvas-fix {
  position: absolute;
  max-height: none;
}
</style>
